<template>
	<view class="wpprs">
		<view class="timerbtn"><text @click="timers = true">2022年12月</text></view>
		<view class="dowlist">
			<view @click="dowlist = 'brandList'">品牌{{ '∨' }}</view>
			<view @click="dowlist = 'categoryList'">类别{{ '∨' }}</view>
			<view @click="dowlist = 'productList'">产品{{ '∨' }}</view>
		</view>
		<view class="scroll" v-if="dowlist" @click="dowlist = null">
			<scroll-view scroll-y>
				<view class="list" v-for="(item, idx) in skugrouping[dowlist]" :key="idx" @click="(engineerstatistics[dowlist] = item), (dowlist = null), getengineerstatistics()">
					{{ item }}
					<image v-if="engineerstatistics[dowlist] == item" src="../../static/images/iconChecked.png"></image>
				</view>
			</scroll-view>
		</view>
		<view class="scrolltimer" v-if="timers">
			<scroll-view scroll-y>
				<view v-for="(item, idx) in yearList" :key="idx" @click="year_ = item">
					{{ item }}
					<image v-if="item == year_" src="../../static/images/iconChecked.png"></image>
				</view>
			</scroll-view>
			<scroll-view scroll-y>
				<view v-for="(item, idx) in monthList" :key="idx" @click="month_ = item">
					{{ item }}月
					<image v-if="item == month_" src="../../static/images/iconChecked.png"></image>
				</view>
			</scroll-view>
			<view class="btnbox">
				<view class="l" @click="timers = false">取消</view>
				<view class="r" @click="(year = year_), (month = month_), (timers = false), getengineerstatistics()">确定</view>
			</view>
		</view>
		<view class="box">
			<view class="shebei">
				<view class="title">
					<image src="../../static/images/iconEngineerInstallRecord.png"></image>
					安装仪器
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.installQuantity }}台</view>
				<view class="num">平台：{{ workRecordtotal.installQuantity }}台</view>
				<view class="title">
					<image src="../../static/images/iconEngineerFixRecord.png"></image>
					维修仪器
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.repairQuantity }}台</view>
				<view class="num">平台：{{ workRecordtotal.repairQuantity }}台</view>
				<view class="title">
					<image src="../../static/images/iconEngineerInspectionRecord.png"></image>
					巡检仪器
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.checkQuantity }}台</view>
				<view class="num">平台：{{ workRecordtotal.checkQuantity }}台</view>
			</view>
			<view class="shebei">
				<view class="title">
					<image src="../../static/images/iconEngineerInstallRecord.png"></image>
					平均安装工时
				</view>
				<view class="num">个人：{{ Math.floor(engineerstatisticsdata.installTime * 100) / 100 }}小时</view>
				<view class="num">平台：{{ Math.floor(workRecordtotal.installTime * 100) / 100 }}小时</view>
				<view class="title">
					<image src="../../static/images/iconEngineerFixRecord.png"></image>
					平均维修工时
				</view>
				<view class="num">个人：{{ Math.floor(engineerstatisticsdata.repairTime * 100) / 100 }}小时</view>
				<view class="num">平台：{{ Math.floor(workRecordtotal.repairTime * 100) / 100 }}小时</view>
				<view class="title">
					<image src="../../static/images/iconEngineerInspectionRecord.png"></image>
					平均巡检工时
				</view>
				<view class="num">个人：{{ Math.floor(engineerstatisticsdata.checkTime * 100) / 100 }}小时</view>
				<view class="num">平台：{{ Math.floor(workRecordtotal.checkTime * 100) / 100 }}小时</view>
			</view>
			<view class="shebei">
				<view class="title">
					<image src="../../static/images/iconEngineerInstallRecord.png"></image>
					安装完成率
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.installRate * 100 }}%</view>
				<view class="num">平台：{{ workRecordtotal.installRate * 100 }}%</view>
				<view class="title">
					<image src="../../static/images/iconEngineerFixRecord.png"></image>
					维修完成率
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.repairRate * 100 }}%</view>
				<view class="num">平台：{{ workRecordtotal.repairRate * 100 }}%</view>
				<view class="title">
					<image src="../../static/images/iconEngineerInspectionRecord.png"></image>
					巡检完成率
				</view>
				<view class="num">个人：{{ engineerstatisticsdata.checkRate * 100 }}%</view>
				<view class="num">平台：{{ workRecordtotal.checkRate * 100 }}%</view>
			</view>
		</view>
	</view>
</template>

<script>
import { engineerstatistics, workRecordtotal, skugrouping } from '../../api/order.js';
export default {
	data() {
		return {
			dowlist: null,
			timers: false,
			skugrouping: {},
			year: '',
			year_: '',
			yearList: [],
			month: '',
			month_: '',
			monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			engineerstatisticsdata: {},
			workRecordtotal: {},
			engineerstatistics: {
				brandList: null,
				categoryList: null,
				productList: null
			}
		};
	},
	onLoad() {
		console.log('getFullYear', `${new Date().getFullYear() - new Date().getMonth()}`);
		for (let i = new Date().getFullYear(); i > new Date().getFullYear() - 20; i--) {
			this.yearList.push(i);
		}
		this.year = new Date().getFullYear();
		this.month = new Date().getMonth();
		this.getengineerstatistics();
		skugrouping().then((data) => {
			this.skugrouping = data.content;
		});

		// workRecordtotal().then(data=>{

		// })
	},
	methods: {
		getengineerstatistics() {
			engineerstatistics({
				...this.engineerstatistics,
				createTime: new Date(`${this.year}-${this.month < 10 ? '0' + this.month : this.month}-01 00:00:00`).getTime()
			}).then((data) => {
				this.engineerstatisticsdata = data.content;
				console.log(data);
			});
			workRecordtotal({
				...this.engineerstatistics,
				createTime: new Date(`${this.year}-${this.month < 10 ? '0' + this.month : this.month}-01 00:00:00`).getTime()
			}).then((data) => {
				this.workRecordtotal = data.content;
				console.log(data);
			});
		}
	}
};
</script>

<style scoped lang="less">
.wpprs {
	width: 100%;
	height: 100%;
	background-color: #f1f1f1;
	.scrolltimer {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		scroll-view {
			height: 700upx;
			padding: 30upx;
			background-color: #fff;
			display: inline-block;
			width: 50%;
			box-sizing: border-box;
			display: inline-block;
			view {
				padding: 10upx;
				text-align: center;
				image {
					width: 30upx;
					height: 30upx;
					margin-left: 20upx;
					transform: translateY(4upx);
				}
			}
		}
		.btnbox {
			padding: 30upx;
			background-color: #fff;
			text-align: center;
			view {
				width: 40%;
				text-align: center;
				padding: 10upx;
				border-radius: 60upx;
				display: inline-block;
				box-sizing: border-box;
			}
			.l {
				border: 1px #ccc solid;
			}
			.r {
				background-color: red;
				color: #fff;
				margin-left: 30upx;
			}
		}
	}
	.scroll {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		scroll-view {
			height: 700upx;
			padding: 30upx;
			background-color: #fff;
			.list {
				padding: 20upx 0upx;
				border-bottom: 1px #eee solid;
				image {
					width: 30upx;
					height: 30upx;
					margin-left: 20upx;
					transform: translateY(4upx);
				}
			}
		}
	}
	.timerbtn {
		font-weight: 500;
		text-align: right;
		padding: 20upx;
		background-color: #fff;
		color: red;
	}
	.dowlist {
		padding: 10upx 0;
		background-color: #fff;
		view {
			width: 33%;
			text-align: center;
			display: inline-block;
		}
	}
	.box {
		padding: 30upx;
		.shebei {
			border-radius: 10upx;
			background-color: #fff;
			padding: 30upx;
			margin-bottom: 30upx;
			.title {
				image {
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
			.num {
				width: 50%;
				text-align: center;
				display: inline-block;
				padding: 20upx 0;
			}
		}
	}
}
</style>
